<template>
  <view class="content">
    <!-- 日期选择器 -->
    <date-range-calendar
      :min-date="minDate"
      :max-date="maxDate"
      :initial-start-date="initialStartDate"
      :initial-end-date="initialEndDate"
      :allow-same-day="allowSameDay"
      :disabled-dates="disabledDates"
      @date-selection-change="handleDateChange"
      @confirm="handleConfirm"
      @reset="handleReset"
    />

    <!-- <view class="btn btn-primary" @click="tomore">更多</view> -->
  </view>
</template>

<script>
import DateRangeCalendar from "@/components/common/DateRangeCalendar.vue";

export default {
  components: { DateRangeCalendar },
  data() {
    return {
      // 选择器配置
      minDate: new Date(),
      maxDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
      initialStartDate: null,
      initialEndDate: null,
      allowSameDay: false,
      disabledDates: [],
      disableWeekends: false,

      // 选择结果 - 范围选择模式
      selectedRange: {
        startDate: null,
        endDate: null,
      },

      // 选择结果 - 单选模式
      selectedDate: null,
    };
  },
  created() {},

  mounted() {},
  methods: {
    // 处理日期选择变更
    handleDateChange(data) {
      console.log("日期选择变更:", data);

      // 单选模式
      if (this.calendarMode === "single") {
        this.selectedDate = data.date;
        return;
      }

      // 范围选择模式
      this.selectedRange = data;

      // 检查最大范围限制
      if (data.startDate && data.endDate && this.maxRangeDays) {
        const days = this.calculateDays(data.startDate, data.endDate);
        if (days > this.maxRangeDays) {
          uni.showToast({
            title: `最多只能选择${this.maxRangeDays}天`,
            icon: "none",
          });
        }
      }
    },

    // 处理确认选择
    handleConfirm(data) {
      console.log("确认选择:", data);

      // 单选模式
      if (this.calendarMode === "single") {
        this.selectedDate = data.date;
        uni.showToast({
          title: "日期选择已确认",
          icon: "success",
        });
        return;
      }

      // 范围选择模式
      // 如果有最大天数限制，验证选择是否超出限制
      if (this.maxRangeDays) {
        const days = this.calculateDays(data.startDate, data.endDate);
        if (days > this.maxRangeDays) {
          uni.showToast({
            title: `最多只能选择${this.maxRangeDays}天`,
            icon: "none",
          });
          return;
        }
      }

      this.selectedRange = {
        startDate: data.startDate,
        endDate: data.endDate,
      };

      // uni.showToast({
      //   title: "日期选择已确认",
      //   icon: "success",
      // });
    },

    // 处理重置
    handleReset() {
      console.log("重置选择");
      if (this.calendarMode === "single") {
        this.selectedDate = null;
      } else {
        this.selectedRange = {
          startDate: null,
          endDate: null,
        };
      }
    },
    tomore(){
      
      uni.navigateTo({
        url: '/pages/demo/calendar-demo'
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.content {
  background: linear-gradient(
    to bottom,
    #f0f7ff 0%,
    // 非常浅的蓝色起始
    #e6f0ff 100% // 稍深的浅蓝色结束
  );
  min-height: 100vh;
  padding-bottom: 120rpx; // 为TabBar预留空间
  box-sizing: border-box;
  height: 100%;
}
.activity-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
.activity-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  padding: 24rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
    background: rgba(0, 0, 0, 0.02);
  }
}
.activity-item-title {
  font-size: 28rpx;
  color: #333;

  &:active {
    opacity: 0.8;
    transform: scale(0.98);
  }
}
.activity-item-image {
  width: 32px;
  height: 32px;
}
</style>
